<script lang='ts' setup>
import { onMounted, reactive, Ref, ref } from 'vue';
import roleServiceApi from '/@/api/org/bean/role'
import appServiceApi from '/@/api/org/bean/app'
//定义事件
const emit = defineEmits<{
    (e: 'add-success', data: any, res: any): void//保存成功回调
    (e: 'change-role-type', val: any): void
}>()

//定义属性
const props = defineProps({
    /**角色id */
    roleId: String,
})

//model-form ref对象
const JxtechModelFormRef = ref();

// 管理范围校验，在角色类型是管理类型时才有管理范围
const validateAdminRange = (rule: any, value: any, callback: any) => {
    if (RoleFormData.value.roleType == 1 && (value == '' || value == null)) {
        callback(new Error('请选择管理范围'))
        return
    }
    callback()
}

const rules = {
    appId: [{ required: true, message: '请选择所属应用', trigger: 'blur' }],
    roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
    adminRange: [{ required: true, validator: validateAdminRange, trigger: 'blur' }],
}
//表单数据
const RoleFormData: Ref<any> = ref({
    roleId: props.roleId,
})

//组件对象
const RoleFormState = reactive({
    primaryKey: 'roleId',
    formStatus: null,
    appList: [] as Array<any>,
    getJxtechModelFormExpose: (): ModelFormExpose => {
        return JxtechModelFormRef.value as ModelFormExpose
    },
    /**新增成功 */
    onAddSuccess: (formData: any, res: any) => {
        emit("add-success", formData, res)
    },
    // 角色类型变化响应方法
    changeRoleType: () => {
        emit('change-role-type', RoleFormData.value.roleType)
    },

    // 表单回调函数
    callback: {
        preSave: () => {
            if (RoleFormData.value.roleType != 1) {
                // 非管理角色
                RoleFormData.value.adminRange = null
            }
        },
        // 初始化时调用 角色类型变化响应方法，提示外部调用者
        afterId: () => {
            emit('change-role-type', RoleFormData.value.roleType)
        }
    }
})

onMounted(() => {
    appServiceApi.queryList().then(res => {
        RoleFormState.appList = res.data as Array<any>
    })
})

// 对外提供方法
defineExpose({
    save: () => JxtechModelFormRef.value.save(),
    getRoleFormData: () => RoleFormData.value
})
</script>
<template>
    <jxtech-model-form
        ref="JxtechModelFormRef"
        :primary-key="RoleFormState.primaryKey"
        v-model:formStatus="RoleFormState.formStatus"
        :service-api="roleServiceApi"
        :form-data="RoleFormData"
        :rules="rules"
        @add-success="RoleFormState.onAddSuccess"
        :callback="RoleFormState.callback"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row>
                    <el-col :span="12">
                        <jxtech-model-form-item label="所属应用" prop="appId">
                            <el-select v-model="RoleFormData.appId" placeholder="请选择所属应用" class="w">
                                <el-option
                                    v-for="item in RoleFormState.appList"
                                    :key="item.appId"
                                    :label="item.appName"
                                    :value="item.appId"
                                ></el-option>
                            </el-select>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="角色类型" prop="roleType">
                            <jxtech-dictionary-select
                                placeholder="请选择角色类型"
                                codeItemId="ROLE_TYPE"
                                v-model="RoleFormData.roleType"
                                @change="RoleFormState.changeRoleType"
                            ></jxtech-dictionary-select>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <jxtech-model-form-item label="角色名称" prop="roleName">
                            <el-input placeholder="请输入角色名称" v-model="RoleFormData.roleName"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="是否公用" prop="common">
                            <el-switch
                                v-model="RoleFormData.common"
                                inline-prompt
                                active-text="是"
                                inactive-text="否"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                            ></el-switch>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <jxtech-model-form-item
                            label="管理范围"
                            prop="adminRange"
                            v-show="RoleFormData.roleType == 1"
                        >
                            <jxtech-dictionary-select
                                placeholder="请选择管理范围"
                                codeItemId="ADMIN_RANGE"
                                v-model="RoleFormData.adminRange"
                            ></jxtech-dictionary-select>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <jxtech-model-form-item label="角色描述" prop="roleDescription">
                            <el-input
                                placeholder="请输入角色描述"
                                v-model="RoleFormData.roleDescription"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                show-word-limit
                                maxlength="255"
                                type="textarea"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>